import React, { createContext } from "react";

const { Provider, Consumer } = createContext();

function SonA () {
  return (
    <>
      this is SonA
      <br />
      <Consumer>{ value => <>最顶层传的数据：{ value }</> }</Consumer>
      <div>
        SonA的子级：<SonSonB></SonSonB>
      </div>
    </>
  )
}

class SonSonB extends React.Component {
  render() {
    return (
      <>
        this is SonSonB.
        <br />
        {/~ 在需要接收最顶层数据的地方使用Consumer ~/}
        <Consumer>{ value => <>最顶层传的数据：{ value }</> }</Consumer>
      </>
    )
  }
}

// 函数组件
// function App () {
//   const msg = '来自最顶层的数据1'
//   return (
//     // Provider需包括在最顶层
//     <Provider value={ msg }>
//       App的子级：<SonA></SonA>
//     </Provider>
//   )
// }

// 类组件
class App extends React.Component {
  msg = '来自最顶层的数据2'
  render() {
    return (
     // Provider需包括在最顶层
      <Provider value={ this.msg }>
        App的子级：<SonA></SonA>
      </Provider>
    )
  }
}

export default App;